<template>
  <div>
    <el-menu :default-active="$route.path" class="el-menu-vertical-demo" background-color="#545c64" text-color="#fff" router>
      <el-submenu :index="item.title" v-for="item in menuList" :key="item.title">
        <template slot="title">
          <i :class="item.icon"></i>
          <span>{{ item.title }}</span>
        </template>
        <el-menu-item-group v-for="sub in item.sub" :key="sub.path">
          <el-menu-item :index="sub.subPath">{{ sub.subTitle }}</el-menu-item>
        </el-menu-item-group>
      </el-submenu>
    </el-menu>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      menuList: [],
      videoList: [
        {
          title: "文件内容",
          icon: "el-icon-folder",
          sub: [
            {
              subTitle: "上传excel",
              subPath: "/upload",
            },
            {
              subTitle: "导出excel",
              subPath: "/export",
            },
            {
              subTitle: "打印",
              subPath: "/print",
            },
          ],
        },
        {
          title: "富文本编辑器",
          icon: "el-icon-link",
          sub: [
            {
              subTitle: "tiptap",
              subPath: "/tiptap",
            },
            {
              subTitle: "ueditor",
              subPath: "/ueditor",
            },
            {
              subTitle: "vue-quill",
              subPath: "/quill",
            },
          ],
        },
        {
          title: "chat",
          icon: "el-icon-pie-chart",
          sub: [
            {
              subTitle: "websocket",
              subPath: "/socket",
            },
          ],
        },
        {
          title: "canvas",
          icon: "el-icon-pie-chart",
          sub: [
            {
              subTitle: "签名板",
              subPath: "/sign",
            },
            {
              subTitle: "海报",
              subPath: "/poster",
            },
          ],
        },
        {
          title: "图",
          icon: "el-icon-s-marketing",
          sub: [
            {
              subTitle: "图表",
              subPath: "/chart",
            },
            {
              subTitle: "地图",
              subPath: "/map",
            },
          ],
        },
        {
          title: "Threejs",
          icon: "el-icon-s-marketing",
          sub: [
            {
              subTitle: "全景房",
              subPath: "/panorama",
            },
            {
              subTitle: "旋转",
              subPath: "/rotate",
            },
          ],
        },
      ],
      projectList: [
        {
          title: "基础案例",
          icon: "el-icon-s-open",
          sub: [
            {
              subTitle: "多语言与日历",
              subPath: "/language",
            },
            {
              subTitle: "上下移动",
              subPath: "/move",
            },
            {
              subTitle: "动态路由",
              subPath: "/permission",
            },
            {
              subTitle: "放大镜",
              subPath: "/magnifier",
            },
            {
              subTitle: "自定义指令",
              subPath: "/directive",
            },
            {
              subTitle: "格式化城市列表",
              subPath: "/citylist",
            },
            {
              subTitle: "歌词解析",
              subPath: "/lrc",
            },
            {
              subTitle: "TodoList",
              subPath: "/todo",
            },
          ],
        },
      ],
      workList: [
        {
          title: "总结",
          icon: "el-icon-s-open",
          sub: [
            {
              subTitle: "同步的方式使用提示",
              subPath: "/asyntip",
            },
          ],
        },
      ],
    }
  },
  watch: {
    "$store.state.headerIndex": {
      handler() {
        let show = this.$store.state.headerIndex
        if (show == "video") {
          this.menuList = this.videoList
        } else if (show == "project") {
          this.menuList = this.projectList
        } else {
          this.menuList = this.workList
        }
      },
      immediate: true,
    },
  },
}
</script>
<style lang="less" scoped>
.el-menu {
  border: none;
}
</style>
